/**
 * Created by user on 2/15/19.
 */
import React from 'react'
import { connect } from 'react-redux'
import { ReplayAction } from '@act'
import { Type, EventCenter } from '@utils/Global'

class QuestionItem extends React.Component {
  clickZanQuestion = () => {
    const { item, dispatch } = this.props
    if (item.data.question.like) {
      return
    }
    dispatch(ReplayAction.doSelfLikeItem({ msgType: 'question', id: item.data.question.id }))
    EventCenter.emit('do_replay_zan_request', { type: 'question', id: item.data.question.id, from: 'qa' })
  }
  renderUsers() {
    let list = this.props.item.data.question.users.slice(0, 5).map((u, i) => {
      return <img key={i} className="s_user" src={u.headimgurl}/>
    })
    return(
      <div className="users_con">{list}</div>
    )
  }
  render() {
    const { item, color_theme} = this.props
    let icon = require(`@images/question/zan_icon${item.data.question.like ? '_active' : ''}.png`)
    let zanText = item.data.question.up_num > 0 ? `+${item.data.question.up_num}` : '同问'
    return (
      <div className={`qa_question ${item.data.question.users.length > 0 ? 'has_users' : ''} ${color_theme === 'red' ? '_red' : ''}`}>
        <div className="triangle"></div>
        <div>
          {item.data.question.data.text}
        </div>
        <div className="question_zan_con">
          <div className="question_zan">
            <div className={`zan_icon_out ${item.data.question.like ? 'active' : ''}`} onClick={this.clickZanQuestion}>
              <img className="zan_icon" src={icon} alt=""/>
            </div>
            <div className="zan_text">{zanText}</div>
          </div>
        </div>
        { this.renderUsers() }
      </div>
    )
  }
}

const mapState = state => {
  return {
    color_theme: state.MainScreenState.info.color_theme
  }
}

export default connect(mapState)(QuestionItem)
